import React from 'react';
import classes from "./FilterMeals.module.css"

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faMagnifyingGlass} from "@fortawesome/free-solid-svg-icons";

const FilterMeals = (props) => {
    const inputChangeHandler = (e)=>{
        const inputValue = e.target.value.trim();
        props.onFilter(inputValue)
    }
    return (
        <div className={classes.FilterMeals}>
            <div className={classes.SearchBox}>
                <FontAwesomeIcon className={classes.SearchIcon} icon={faMagnifyingGlass}  />
                <input
                    className={classes.FilterInput}
                    type="text"
                    placeholder="请输入关键字"
                    onChange={inputChangeHandler}
                />
            </div>
        </div>

    );
};

export default FilterMeals;